<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<style>
			*{
				font: 16px "微软雅黑";
				/* 去掉无序列表样式 针对一项列表项标记 */
				list-sty le-type: none;
/* 去掉无序列表样式 针对三项 ①列表项标记 list-style-type
						   ②列表项位置 list-style-position
						   ③列表项图片 list-style-image
						所有的效果，去掉样式   
*/
				list-style: none;
				/* 去掉内外边距： ul li 存在外边距 */
				margin: 0;
				padding: 0;
			}
			aside{
				width: 255px;
				height: 530px;
				background-color: #878787;
				/* 盒子模型：外边距 */
				mar gin: 20px 200px;
			}
			aside ul.ul_sidebar li{
				width: 235px;
				height: 50px;
				text-align: left;
				line-height: 50px;
				/* 挂靠点【固定】 使用相对定位*/
				position: relative;
				top: 15px;
			}
			aside ul.ul_sidebar li:hover{
				background: #fe8729;
			}
			/* 挂靠点【活动】 使用绝对定位。按照父级位置定位*/
			aside ul.ul_sidebar div.out{
				width: 500px;
				height: 528px;
				border: 1px solid red;
				/* 绝对定位 */
				position: absolute;
				left: 255px;
				/* 默认隐藏 搞不定【jQuery】*/
				display: none;
			}
			
			/* 新增样式:大于号，右侧撑大 */
			aside ul.ul_sidebar li span{
				float: right;
				padding-right: 20px;
			}
			/*新增样式:左栏左侧文字间隙，左侧撑大*/
			aside ul.ul_sidebar li{
				padding-left: 20px;
				color: white;
			}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构： 外层div .sidebar
			 html结构标记：aside元素语义化元素， 表示：左栏、侧边栏、广告
						有利于SEO优化
						通常代替div+id/class
						
						内层ul.ul_sidebar li*10
						内容参照京东左栏第一个
			 css结构：内部引入方式
					 通配选择器--合理添加
					 外层aside .sidebar 235*460 背景色
					 内层每个li加宽高 235*46 
					 内层文本垂直居中对齐，文字：16px
					 鼠标移动上去li，背景色改变
		 -->
		 <aside>
			 <ul class="ul_sidebar">
				 <!-- 弹出框  模式  div+别名 绝对定位-->
				 <div class="out"></div>
			 	<li>手机 平板 电话卡<span>></span></li>
			 	<li>电视 盒子<span>></span></li>
			 	<li>路由器 智能硬件<span>></span></li>
			 	<li>移动电源 插线板<span>></span></li>
			 	<li>耳机 音箱<span>></span></li>
			 	<li>电池 存储卡<span>></span></li>
			 	<li>保护套 后盖<span>></span></li>
			 	<li>贴膜 其他配件<span>></span></li>
			 	<li>米兔 服装<span>></span></li>
			 	<li>箱包 其他周边<span>></span></li>
			 </ul>
		 </aside>
		 <script>
			 /*左栏实现：1.添加事件 li 2.切换效果  3.切换效果*/
			 $("aside ul.ul_sidebar li").hover(function(){
				 //弹出框 默认 隐藏 --抓弹出框  第一件事  显示
				   $("aside ul.ul_sidebar div.out").css("display","block");
			 },function(){
				   $("aside ul.ul_sidebar div.out").css("display","none");
			 })
		 </script>
	</body>
</html>

<!--    css 悬停效果    效果不能实现：  不能切换
		jq  悬停效果事件源    hover    切换效果问题
		语法：$("选择器").hover(function(){第一件事},function(){第二件事})
 -->